The amber border highlight is now applied to every non-selected plan because the plan.highlight && guard was removed. This makes all unselected plans look "highlighted" and decouples the border styling from the Most Popular badge logic below. Restore the plan.highlight condition (or otherwise tie the border class to the same highlight rule).

payment.invoiceUrl is rendered directly into an href. If this value can ever be influenced by API data, a javascript:/non-http(s) URL could become a clickable XSS vector. Consider validating/normalizing the URL before rendering (e.g., only allow http/https and otherwise treat it as unavailable).

With the new invoiceUrl field, the billingHistory items are implicitly expected to have a specific shape, but the state is typed as any[]. This makes it easy to ship runtime errors (e.g., missing currency, status, invoiceUrl). Define a BillingHistoryItem type/interface (with invoiceUrl?: string) and use it for billingHistory and the map callback.

⚠️ Potential issue | 🟠 Major

Validate payment.invoiceUrl before rendering it as a link.

On Line 334, href is populated directly from API data. If a non-HTTPS or malformed URL is returned, this can create a client-side security risk. Gate the link behind strict URL validation and show “Unavailable” when invalid.

+  const getSafeInvoiceUrl = (rawUrl?: string) => {
+    if (!rawUrl) return null;
+    try {
+      const parsed = new URL(rawUrl);
+      return parsed.protocol === 'https:' ? parsed.toString() : null;
+    } catch {
+      return null;
+    }
+  };
...
-                                {payment.invoiceUrl ? (
+                                {getSafeInvoiceUrl(payment.invoiceUrl) ? (
                                   <a
-                                    href={payment.invoiceUrl}
+                                    href={getSafeInvoiceUrl(payment.invoiceUrl)!}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     className="text-primary-400 hover:text-primary-300 transition-colors inline-flex items-center gap-1 text-sm"
                                   >
                                     Download
                                   </a>
                                 ) : (

Verify each finding against the current code and only fix it if needed.

In `@src/components/Billing.tsx` around lines 332 - 345, Validate
payment.invoiceUrl before rendering the anchor: implement or call a helper
(e.g., isValidInvoiceUrl) that attempts to construct a URL object from
payment.invoiceUrl and ensures url.protocol === 'https:' (reject malformed or
non-HTTPS URLs), then render the <a> only when that validation passes and fall
back to the "Unavailable" <span> otherwise; update the conditional around
payment.invoiceUrl in the Billing component to use that validation check.

⚠️ Potential issue | 🟠 Major

CI is currently blocked by formatting issues.

Pipeline already reports Prettier failure; please run Prettier on this file before merge (the JSX wrapping around these changed lines is a likely contributor).

Also applies to: 379-380

Verify each finding against the current code and only fix it if needed.

In `@src/components/Billing.tsx` around lines 342 - 343, Prettier formatting is
failing in the Billing component around the JSX that renders the "Unavailable"
span; run Prettier on src/components/Billing.tsx to reformat the JSX (the span
with className "text-neutral-600 cursor-not-allowed inline-flex items-center
gap-1 text-sm" and the surrounding JSX blocks around lines where "Unavailable"
appears, and the similar JSX near lines 379-380) so the file conforms to project
Prettier rules and the CI pipeline will pass.